<template>
  <!--绑定支付宝-->
	<div id="app" class="my-bindalipay backf4">
      <!--第一次绑定支付宝-->
      <div class="bindalipay" v-if="false">
          <!--<h3 class="withdraw-title">修改提现账号</h3>-->
          <p class="sure-btn">确定</p>
          <div class="bind-pay">
              <input type="tel" name="paycount" placeholder="请输入支付宝提现账户">
          </div>
          <p class="pad3">* &nbsp;提现金额会直接转到您输入的账户</p>
      </div>
      <!--修改支付宝-->
		  <div class="bindalipay">
          <h3 class="withdraw-title withdraw-title1" v-if="!hasAlipay">绑定支付宝提现账号</h3>
          <h3 class="withdraw-title withdraw-title1" v-if="hasAlipay">修改提现账号</h3>
          <p class="text-p text-p2"  v-if="!hasAlipay"><span class="icon"></span>尚未绑定支付宝账号</p>
          <p class="text-p text-p2"  v-if="hasAlipay"><span class="icon"></span>输入新提现账号</p>
          <div class="input-box input-box1">
              <input  v-model="account" type="tel" :placeholder="paytext">
          </div>
          <p class="pad4" style="margin-top: .5rem;">验证码通过短信发送至:</p>
          <p class="text-p" style="margin-top: .4rem;"><span class="icon"></span><span v-text="mobile"></span></p>
           <p class="pad4">输入获取的验证码:</p>
          <div class="input-box2" style="margin-top: .50rem;">
              <div>
                  <span :class="{'on':this.pawStr1[0]}">{{ this.pawStr1[0] | getpaw }}</span>
                  <span :class="{'on':this.pawStr1[1]}">{{ this.pawStr1[1] | getpaw }}</span>
                  <span :class="{'on':this.pawStr1[2]}">{{ this.pawStr1[2] | getpaw }}</span>
                  <span :class="{'on':this.pawStr1[3]}">{{ this.pawStr1[3] | getpaw }}</span>
              </div>
              <input  v-model="code" type="text" placeholder="请输入验证码" @input.stop='controlFirstNumber(code)'>
          </div>
          <!--4，绑定支付宝，5修改支付宝-->
          <div class="pad4" style="margin-top: .4rem;">
              <span class="load-icon" @click="sendcode" v-text="sendtext">获取验证码</span>
          </div>
          <div class="bottom-btn" @click="goCheck">
              <span class="item1"></span>
              <div class="item2">继续</div>
          </div>          
      </div>
	</div>
</template>
<script>
    import 'assets/css/common.css'
    import './index.css'
    import common from 'assets/js/common'
    import {Toast} from 'mint-ui'
  export default {
    data() {
      return {
      	webname:5464,
        hasAlipay:'',
        mobile:'',
        code:'',
        code2:'',
        account:'',
        sendtext:'发送验证码',
        timenum:60,
        timefun:'',
        codetype:'',
        mobile:'',
        paytext:'',
        pawStr1:[] //密码段
      }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate(){
    	
    	
    },  
    //在挂载开始之前被调用
    beforeMount(){
    	
    
    },
    components:{Toast}, 
    //已成功挂载，相当ready()
    mounted(){
        clearInterval(this.timefun);
        this.sendtext = '发送验证码';
        this.timenum = 60;
        this.getalipay();

        //没资质审核跳资质审核页面
        window['goExam'] = function(){
            if(common.platform == 'ios'){               
               goexamine();
            }
            if(common.platform == 'android'){
                window.user.goexamine();
            }               
        }

    },
    //相关操作事件
    methods: {
          //获取当前钻石和是否设置支付密码
          getUserInfo:function(){
              common.ajax({
                  type:'get',
                  url:'api/user/getuserinfo'
              }).then(res=>{
                  this.mobile = res.data.mobile;
              })
          },      
          //输入
          controlFirstNumber(num){
              if(num.length > 0){
                  this.pawStr1 = num.split('');
                  if(num.length == 4){
                      console.log(this.code);
                      this.code2 = this.code;
                  }
                  if(num.length > 4){
                      this.code = this.code2;
                  }
              }
              if(num.length == 0){
                  this.pawStr1 = [];
              }
          },
          //到资质审核页
          goCheck:function(){
              if(!this.trim(this.account,'g')){
                  this.confirm(`请输入支付宝账号（手机/邮箱）`);
              }else if(!this.trim(this.code,'g')){
                  this.confirm(`请输入验证码`);
              }else{
                 if((this.hasAlipay.length>0)){
                      this.changealipay();
                 }else{
                     this.bindalipay();
                 }
              }

          },
          getmobile:function(num){
              if(num){
                  var str = num.toString();
                  var str1 = str.substring(0,3);
                  var str2 = str.substring(7);
                  var str3 = str1+'****'+str2;
                  return str3
              }
          },
          //倒计时
          timeOut:function(){
             console.log(this.timenum);

              if (this.timenum <= 0) {
                  clearInterval(this.timefun);
                  this.timefun = '';
                  this.timenum = 60;
                  this.sendtext = "发送验证码";
                  return;                    
              }else{
                  this.timenum -= 1;
                  this.sendtext = this.timenum+"s后重发";                    
              }
          },
          //发送验证码接口
          sendcode(){

              if(this.sendtext == "发送验证码"){
                  this.sendtext = "发送中...";

                  var _this = this;
                  common.ajax({
                      type:'POST',
                      url:"/api/sms/send/code",
                      data:{
                          mobile:this.mobile,
                          type:this.codetype
                      }
                  }).then(response=>{
                      console.log(this.getmobile(this.mobile));
                      var formatMobile = this.getmobile(this.mobile);

                      this.confirm(`验证码已发送您的手机${formatMobile},请注意查收！`);

                      this.timefun = setInterval(()=>{
                          _this.timeOut();
                      }, 1000); 

                  }).catch(response=>{
                      this.sendtext = "发送验证码"
                  })
              }
          },
          //看是否有支付宝
          getalipay(){
                common.ajax({
                    type:'GET',
                    url:"api/user/withdrawaldata?currency=charm"
                }).then(res=>{
                    
                    this.getUserInfo();
                    this.hasAlipay = res.data.account;
                    //修改支付宝
                    if(res.data.account.length>0){
                        this.paytext = res.data.account;
                        this.codetype = 5;
                        $('title').text('修改支付宝');
                    }else{
                        //绑定支付宝
                        $('title').text('绑定支付宝');
                        this.paytext = '请输入提现账号(手机号/邮箱)';
                        this.codetype = 4;
                    }
                })
          },
          //绑定支付宝
          bindalipay(){
                common.ajax({
                    type:'POST',
                    url:"/api/adder/bindaccount",
                    data:{
                        account:this.account,
                        code:this.code
                    }
                }).then(res=>{

                    this.confirm(res.info);

                    setTimeout(function(){
                        window.goExam();
                    },1000);      
                                  
                    // window.location.href = '/views/checkstatus/index.html?h5=true';
                })
          },
          //修改支付宝
          changealipay(){
                common.ajax({
                    type:'POST',
                    url:"/api/adder/updateaccount",
                    data:{
                        account:this.account,
                        code:this.code
                    }
                }).then(res=>{
                    this.confirm(res.info);

                    setTimeout(function(){
                        window.goExam();
                    },1000);

                    // window.location.href = '/views/checkstatus/index.html?h5=true';
                })
          }, 
          trim:function(str,is_global){
              var result;
              result = str.replace(/(^\s+)|(\s+$)/g,"");
              if(is_global.toLowerCase()=="g"){
                  result = result.replace(/\s/g,"");
               }
              return result;
          },
          confirm : function (error) {
              Toast({
                  message: error,
                  duration: 2500,
                  position: 'bottom',
                  //iconClass: 'icon icon-success'
              });
          }        
    },
    filters:{
        getpaw:function(num){
            if(num){
                return '*'
            }
        }
    } 
  }
</script>

<style>

</style>
